<template>
	<view class="goodscontent">
		<!-- 分类列表 -->
		<page-head :transparent='true'>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
		</page-head>
		<view class="banner-row">
			<image :src="banner" mode="widthFix"></image>
		</view>
		<!-- 商品列表 -->
		<tb-goods-list :goodsList="goodsList" :loadingText="loadingText" @eventClick="toDetail" :tm="tbF"></tb-goods-list>
	</view>
</template>

<script>
	import TbGoodsList from '../../components/tb-goods-list.vue';
	import banner from '../../static/img/search/banner.png';

	let page = 1,
		pageSize = 20,
		cate = 0,
		sort = 'youhuiquan',
		sortby = 'desc',
		seller = '',
		tm = false;

	export default {
		components: {
			TbGoodsList
		},
		data() {
			return {
				banner: banner,
				title: '',
				//分类信息0全部1女装2内衣3母婴4男装5食品6居家7鞋包8美妆9数码10家电11文体
				categories: [{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '女装'
					},
					{
						id: 2,
						name: '内衣'
					},
					{
						id: 3,
						name: '母婴'
					},
					{
						id: 4,
						name: '男装'
					},
					{
						id: 5,
						name: '食品'
					},
					{
						id: 6,
						name: '家居'
					},
					{
						id: 7,
						name: '鞋包配饰'
					},
					{
						id: 8,
						name: '美妆'
					},
					{
						id: 9,
						name: '数码'
					},
					{
						id: 10,
						name: '家电'
					},
					{
						id: 11,
						name: '文体车品'
					}
				],
				// 当前选择的分类
				cateCurrentIndex: 0,
				//筛选分类
				sortList: [{
						id: 0,
						name: '人气'
					},
					{
						id: 1,
						name: '销量'
					},
					{
						id: 2,
						name: '价格',
						sort: 0
					},
					{
						id: 3,
						name: '抵扣金额',
						sort: 0
					}
				],
				//当前选择的筛选分类
				sortIndex: 0,
				loadingText: '加载中...',
				goodsList: [],
				tbF: true
			};
		},
		onShow() {
			genCommonData();
		},
		onLoad(event) {
			this.initData();
			seller = event.title;
			cate = event.cateId;
			this.getGoodsList(cate);
			this.title = seller;
		},
		onReachBottom: function() {
			this.getGoodsList(cate);
		},
		onPullDownRefresh: function() {
			this.goodsList = [];
			page = 1;
			this.loadingText = '加载中...';
			this.getGoodsList();
		},
		methods: {
			setNa() {
				callNative('showSearchIcon', {
					searchLink: this.$httpUrl + 'pages/search/search'
				})
			},
			initData() {
				page = 1;
				pageSize = 20;
				cate = 0;
				sort = 'youhuiquan';
				sortby = 'desc';
				seller = '';
				tm = true;
			},
			genRelationId() {
				let relationId = uni.getStorageSync('relationId');
				if (relationId !== null && relationId !== 'null') {
					this.getGoodsList();
				} else {
					const redirection_url = window.location.href;
					const url =
						'https://open.21ds.cn/index/extapi/tbkrelationbeian?apkey=80f3e9d1-7e15-04ae-0e69-6aa3e32fa293&infotype=1&offlinescene=4&onlinescene=1&invitercode=M2VV49&return_url=' +
						redirection_url;
					appNavigateTo(url);
				}
			},
			setNavigation(title) {
				this.title = title;
				uni.setNavigationBarTitle({
					title: title
				});
			},
			sortChange: function(e) {
				this.loadingText = '加载中...';
				var sortindex = e.currentTarget.dataset.index;
				if (sortindex >= 2) {
					if (sortindex == 2) {
						this.sortList[3].sort = 0;
						if (this.sortList[sortindex].sort > 1) {
							this.sortList[sortindex].sort = 1;
							sort = 'price_des';
						} else {
							this.sortList[sortindex].sort = 2;
							sort = 'price_asc';
						}
					} else {
						this.sortList[2].sort = 0;
						if (this.sortList[sortindex].sort > 1) {
							this.sortList[sortindex].sort = 1;

							sort = 'youhuiquan_desc';
						} else {
							this.sortList[sortindex].sort = 2;
							sort = 'youhuiquan_asc';
						}
					}
				} else {
					this.sortList[2].sort = 0;
					this.sortList[3].sort = 0;
					if (sortindex == 0) {
						sort = 'tk_total_sales_des';
					} else {
						sort = 'total_sales_des';
					}
				}
				this.sortIndex = sortindex;
				page = 1;
				this.goodsList = [];
				this.getGoodsList();
			},
			tabChange: function(e) {
				this.loadingText = '加载中...';
				// 选中的索引
				var index = e.currentTarget.dataset.index;
				// 具体的分类id
				var cateid = e.currentTarget.dataset.cid;
				this.cateCurrentIndex = index;
				// 动态替换内容
				this.content = this.categories[index].name;

				// 读取分类数据
				cate = cateid; //把分类信息发送给api接口即可读取对应分类的数据
				// 重置分页及数据
				page = 1;
				this.goodsList = [];
				// 加载对应分类数据覆盖上一个分类的展示数据 加载更多是继续使用这个分类
				this.getGoodsList();
			},
			async genCategory() {
				try {
					let res = await this.$request.get('/coupon-product/self/product/classification', {});
					let datas = res.data.data;
					let allCate = [{
						name: '全部',
						id: ''
					}];
					this.categories = allCate.concat(datas);
				} catch (e) {
					console.log(e);
				}
			},
			async getGoodsList(cateId) {
				try {
					uni.showLoading({
						title: 'loading...',
						mask: true
					});
					let data = {
						pageno: page,
						pagesize: pageSize,
						cat: cateId,
						istmall: tm,
						sort: 'youhuiquan_desc',
						hascoupon: 'true'
					};
					// console.log( data);
					let res = await this.$request.post('/coupon-product/myq/tbGoods/goodsList', {
						data: data
					});
					let datas = res.data;
					let newList = datas.data;
					if (newList != '' && newList.length > 0) {
						this.goodsList = this.goodsList.concat(newList);
						page++;
						if (page == 500 || newList.length < 20) {
							this.loadingText = '没有更多了';
						}
					} else {
						this.loadingText = '没有更多了';
					}
					uni.hideLoading();
				} catch (e) {
					uni.hideLoading();
					console.log(e);
					this.loadingText = '没有更多了';
				}
			},
			toDetail(e) {
				h5NavigateTo({
					url: '../tbdetail/tbdetail?skuId=' +
						e.num_iid +
						'&cid=' +
						cate +
						'&title=' +
						e.title +
						'&seller=' +
						seller +
						'&coupon_amount=' +
						e.coupon_amount +
						'&startTime=' +
						e.coupon_start_time +
						'&endTime=' +
						e.coupon_end_time +
						'&tm=' +
						tm
				});
			}
		}
	};
</script>

<style lang="scss">
	@import '@/common/css/goods-list.scss';

	.banner-row {
		width: 100%;
		height: 848px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.sort-box {
		width: 100%;
		min-width: 750px;
	}

	/* view.sort-box-tab:nth-child(1) {
        width: 30%;
    }
    view.sort-box-tab:nth-child(2) {
        width: 30%;
    }
    view.sort-box-tab:nth-child(3) {
        width: 40%;
    } */
	.category-row {
		width: 100%;
		height: 80px;
		line-height: 80px;
		display: inline-flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		background-color: aquamarine;

		.category-scroll {
			height: 60px;
			line-height: 60px;
			display: inline-flex;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;

			.scroll-view-item {
				width: 80px;
				height: 60px;
			}
		}
	}

	.grace-news-list-imgs {
		max-height: 68px;
		overflow: hidden;
	}

	.page-title-row {
		width: 100%;
		height: 80px;
		background-color: red;
		display: flex;

		.back-icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60px;
			height: 75px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.page-title {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-weight: 300;
				color: white;
			}
		}
	}

	.header-row {
		//width: 100%;
		width: 750px;
		height: 60px;
		background-image: url('../../static/img/search/list.png');
		background-repeat: no-repeat;
		background-size: cover;

		.header-line {
			width: 100%;
			height: 60px;
			display: inline-flex;
			justify-content: flex-start;
			font-size: 30px;
			align-items: center;

			.header-range {
				width: 30%;
				height: 60px;
				justify-content: space-between;

				image {
					width: 20px;
					height: 15px;
				}

				padding-left: 10%;
			}

			.hearder-rate {
				width: 30%;
				height: 60px;

				image {
					width: 20px;
					height: 15px;
				}
			}

			.header-price {
				width: 30%;
				height: 60px;

				image {
					width: 20px;
					height: 15px;
				}
			}
		}
	}
</style>
